@import "size";
@import "reset";

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {

  display: table;

  line-height: 0;

  content: "";
}

.clearfix:after {
  clear: both;
}

.f-l{
  float: left;
}

.f-r{
  float: right;
}

.m-r-none{
  margin-right: 0 !important;
}

.m-b-none{
  margin-bottom: 0 !important;
}

.b-r-none{
  border-right: 0 !important;
}

.m-t-none{
  margin-top: 0 !important;
}

//限制行字数
.text-overflow-1,
.text-overflow-2{
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.text-overflow-1{
  -webkit-line-clamp: 1;
}

.text-overflow-2{
  -webkit-line-clamp: 2;
}

.text-overflow{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

$color-green:#51B64E;
$color-yellow:#E4A130;
$color-bule:#576b95;
$color-red:#f40;

.color-yellow{
  color: $color-yellow;
}

.color-green{
  color: $color-green;
}

.color-bule{
  color: $color-bule;
}

.color-red{
  color: $color-red;
}

.show{
  display: block !important;
}

.hide{
  display: none !important;
}

//弹出层
.mask{
  position: fixed;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0,0,0,0.4);
  z-index: 9999999999999;
  display: none;
}

.loading-conetnt{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%,-50%,0);
  -webkit-transform: translate3d(-50%,-50%,0);
  height: 100px;
  width: 100px;
  text-align: center;
  background-color: #000;
  border-radius: $_10;
  background-image: url("../../images/loading-icons/loading14.gif");
  background-size: 40%;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;

  .load-text{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: $_16 0;
    color: #ccc;
  }
}

//搜索栏
#table_bar_wrap{
  width: $_750;
  overflow: hidden;
}

.top_bar{
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  border-bottom: 1px solid #ccc;
  z-index: 999;
  margin: auto;
  background: #f9f9f9;
  width: $_750;
}

.table_bar{
  display: flex;
  align-items:center;
  justify-content: center;
  padding:  0 $_10;

  .tb{
    height: $_82;
    flex: 1;
    text-align: center;
    line-height: $_82;
    font-size: $_26;
    font-weight: bold;
    color: #545454;
    border-bottom: 2px solid transparent;
  }

  .tb:nth-child(2){
    border-left:none ;
    border-right: none;
  }

  .tb.active{
    border-bottom: 2px solid $color-green;
    color: $color-green;
  }

}

.teacher_search{
  margin: auto;
  width: $_750;
  height: $_90;
  display: flex;
  align-items:center;
  justify-content: center;
  padding: 0 $_20;

  border-top: 1px solid #ececec;

  .search_placeholder {
    height:$_60;
    width: 100%;
    border-radius: $_30;
    border: 1px solid #ddd;
    color: #aaa;
    position: relative;
    padding-left: $_60;
    display: flex;
    flex-flow: row;
    align-items:center;
    overflow: hidden;

    input{
      height: 100%;
      width: 100%;
      background: #f9f9f9;
    }
  }

  .search_placeholder:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: $_60;
    width: $_60;
    background-image: url("../../images/search_ico.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 40% auto;
  }

  .search_box{
    position: fixed;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: #f2f2f2;
    transform: translateY(100%);
    -webkit-transform: translateY(100%);
    -webkit-transition: all .2s cubic-bezier(0.77, 0, 0.175, 1);
    transition: all .2s cubic-bezier(0.77, 0, 0.175, 1);
  }

  .show-box{
    transform: translateY(0);
    -webkit-transform: translateY(0);
  }

  .search_box_search{
    height: $_90;
    background: #fff;
    display: flex;
    flex-flow: row;
    align-items:center;
    justify-content: space-between;
  }

  .search_exit{
    height: 80%;
    width: $_68;
  }

  .search_exit_icon{
    height: 100%;
    width: 100%;
    background-image: url("../../images/exit.png");
    background-position: center center;
    background-size: auto 40%;
    background-repeat: no-repeat;
    transform:rotate(-180deg);
    -webkit-transform:rotate(-180deg);
  }

  .search_box_input{
    height: $_70;
    width: $_480;
    border: 1px solid #ddd;
    border-radius:$_6;
    overflow: hidden;
    position: relative;
    padding-left: $_60;

    input{
      height: 100%;
      width: 100%;
      background: transparent;
      color: #999;
      font-size: $_24;
    }
  }

  .search_box_input:before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: $_70;
    width: $_60;
    background-image: url("../../images/search_ico.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 50% auto;
  }

  .search_box_btn{
    height: $_68;
    width: $_120;
    color: #fff;
    background: $color-green;
    margin-right: $_20;
    border-radius: $_10;
  }

  .search_hot{
    padding: $_30;
    padding-top: $_60;

    .title{
      font-size: $_28;
      color: #888;
    }
  }

  .hot_list{
    display: flex;
    flex-flow: row;
    flex-wrap:wrap;
    margin-top: $_40;
  }

  .hot_list_li{
    height: $_80;
    width: $_220;
    border: 1px solid #ddd;
    margin-bottom: $_20;
    background: #fff;
    color: #8e8e98;
    line-height: $_78;
    text-align: center;
    border-radius: $_4;
    font-size: $_26;
  }

  .hot_list_li:nth-child(3n+2) {
    margin:  0 $_14;
  }
}

.handel_btn_more{
  position: fixed;
  width: 100%;
  height: $_80;
  bottom: 0;
  left: 0;
  border-top: 1px solid #ccc;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);

  a{
    display: block;
    height: 100%;
    width: 100%;
    background: $color-green;
    text-align: center;
    line-height: $_80;
    color: #fff;
    font-size: $_30;
  }
}

.footer_show{
  transform: translateY(0);
  -webkit-transform: translateY(0);
}

#scroll_el{
  overflow: hidden;
  margin-top: $_168;

}

.show-wrap{
  opacity: 0;
  -webkit-transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
  transition: all .3s cubic-bezier(0.77, 0, 0.175, 1);
}

.list-show{
  opacity: 1 !important;
}


//全局confirm

.confrim_content{
  width: 70%;
  background: #fff;
  position:fixed;
  position: fixed;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  border-radius: $_6;
}

.confrim_text{
  padding: $_40 $_20;
  text-align: center;
  color: #555;
}

.confrim_btn{
  height: $_70;
  border-top: 1px solid #afafbc;
  display: flex;
  color: #007aff;
  overflow: hidden;

  .confrim_ok,.confrim_cancel{
    flex: 1;
    height: $_70;
    line-height: $_70;
    text-align: center;
  }

  .confrim_cancel{
    border-left: 1px solid #afafbc;
  }
};


